<template>
	<div id="all-Car">
		
		<div id="show-Car">
			<div class="search-Car">
				<div style="width: 50%;">
					<el-input type="text" class="search" v-model="searchCar" placeholder="根据车牌号查询车辆"></el-input>
				</div>
				
				<el-button @click="addCar" type="primary" class="button-add" plain>添加车辆</el-button>
				<el-button @click="allCarLoc" type="primary" class="button-add" plain>查看全部车辆</el-button>

			</div>
			<div class= "table-Car">
				<template>
					<el-table :data="pageCar" border style="width: 100%; min-width: 680px;">
						<el-table-column prop="license_num" label="车牌号" width="130">
						</el-table-column>
						<el-table-column prop="brand" label="车辆品牌" width="120">
						</el-table-column>
						<el-table-column prop="type" label="车辆类型" width="120">
						</el-table-column>
						<el-table-column label="状态" width="130">
							<template slot-scope="scope">
								<p>{{scope.row.state | state}}</p>
							</template>
						</el-table-column>
				
						<el-table-column label="操作" min-width="160" >
							<template slot-scope="scope">
								<el-button @click="checkCar(scope.row.id)" type="primary" size="small">查看</el-button>
								<el-button @click="deleteCar(scope.row.id)" type="warning" size="small">删除</el-button>
				
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			


			<div class="table-footer">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
				 :page-sizes="page.sizes" :page-size="pageSize" layout="sizes, prev, pager, next" :total="total">
				</el-pagination>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Car: [], // 保存着用户的信息
				showCar: [], //显示的用户
				pageCar:[],
				searchCar: '',
				page:{
					sizes:[5,7] ,//数量下拉框
					},
				pageSize:5,//每页显示的数量
				total: 20,//总数量
				currentPage : 1
			}
		},
		watch: {
			searchCar:function(newVal) {
				let regx = new RegExp(newVal);
				if (newVal == '') {
					this.showCar = [];
					for (let i in this.Car) {
						this.showCar.push(this.Car[i]);
						
					}
					this.total = this.showCar.length;
				} else {
					this.showCar = this.Car.filter(x => {
						return regx.test(x.license_num);
					})
					this.total = this.showCar.length;
				}
				this.pageChange();
			}
		},
		filters: {
			state: function(val) {
				if (val == 0) {
					return '未使用'
				} else {
					return '正在行驶'
				}
			}
		},
		methods: {
			addCar() {
				this.$router.push({
					path: '/main/manager/addCar'
				})
			},
			search_Car() {},
			allCarLoc(){
				this.$router.push({
					name: 'allCarLoc',
					params: {
						car: this.Car
					}
				})
			},
			checkCar(id) {
				this.$router.push({
					path: '/main/manager/CarInfo',
					query: {
						car_id: id
					}
				})
			},
			deleteCar(id) {
				let flag = confirm("是否删除")
				if (flag) {
					this.$axios.post('/api/admin/deleteCar', {
							id: id
						})
						.then(data => {
							if (data.status == 200) {

								this.getAllCar();
							}
						})
						.catch(err => {

						})
				}

			},
			getAllCar() {
				this.$axios.get('/api/admin/allCarInfo')
					.then((data) => {
						if (data.status == 200) {
							this.total = data.data.length;
							this.Car = data.data;
							this.Car.sort(function(a,b){
								return   b.state - a.state;
							})
							
						}
						this.showCar = [];
						for (let i in this.Car) {
							this.showCar.push(this.Car[i]);
						}
						this.pageChange();
					})
					.catch((err) => {
						console.log(err)
					})
			},
			pageChange(){
				this.pageCar.length = 0;
				let min = (this.currentPage-1) * this.pageSize;
				let max ;
				if(min + this.pageSize <this.total ){
					
					max = min + this.pageSize;

				}else{
					max = this.total;
				}
				for(let i = 0 ;i+min < max;i++){
					let j = min+i;
					this.pageCar.splice(i,1,this.showCar[j])
				}
				
			},
			handleSizeChange(size){
				this.pageSize = size;
				this.currentPage =1
				
				this.pageChange();
				this.currentPage =1;
			},
			handleCurrentChange(currentPage){
				this.currentPage =currentPage;
				this.pageChange();
			}
		},
		created() {
			this.getAllCar();
		}
	}
</script>

<style lang="less" scoped>
	#all-Car {
		margin-top: 50px;
		margin-left: 50px;
		width: 80%;

		#show-Car {

			.search-Car {
				display: flex;
				height: 50px;
				line-height: 50px;
				text-align: left;

				.search {
					

				}

				.button-add {
					margin-left: 50px;
				}
			}

			.table-Car {
				height: 450px;
			}

			.table-footer {
				height: 40px;
			}

		}

	}
</style>
